<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Figment of the Imagination</title>

<link rel="shortcut icon" href="images/2reading.gif">

<style type="text/css">

body, html {
	margin: 0px;
	
}

body {
	background-image: url(images/oldpaper.png);
	background-repeat: repeat;
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
	padding: 10px;

	

}

#content {
	width:100%;
	height: 100%;
	margin:0px auto 0 auto;
	left: 0;
	right: 0;

}

#cv {
	background: #fff;
	margin: 10px auto 0 auto;
	border: 5px double #aa9e8c;
}

#bg, #char {
	display: none;
}

#scenetext {
	width: 780px;
	height: auto;
	padding: 10px;
	margin: 0px auto 20px auto;
	color: #333;
	font-size: 18px;
	font-family: georgia;
	line-height: 25px;

	
	
}

h1 {
	padding: 10px;
	color: #5b3935; 
	font-family: georgia;
	text-align: center;	


}

h2 {
	font-family: georgia;
	color: #5b3935;
	text-align: center;	
	
}


p:first-letter
{
font-size:300%;
color:#d07056;
font-style: italic;
}


#button {
	border-radius: 100%;
	background: #a45d4d;
	border: 2px solid #fff;
	height:60px;
	width: 60px;
	transition: .7s ease-out;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	font-family: georgia;
	margin: 0px 5px;
	
	
}

#button:hover {
-webkit-box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.15);
            -moz-box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.15); 
            box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.15);
            border: 2px solid #fff;
            transition: .7s ease-out;
}


#button2 {
	border-radius: 100%;
	background: #a45d4d;
	border: 2px solid #fff;
	height:100px;
	width: 100px;
	transition: .7s ease-out;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	font-family: georgia;
	margin: 0px 5px;
	
	
}

#button2:hover {
-webkit-box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.15);
            -moz-box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.15); 
            box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.15);
            border: 2px solid #fff;
            transition: .7s ease-out;
}

</style>


</head>
<body>


	<h1>Introduction</h1>

<div id="content">

<center><img src="images/line divider.png" width=800 style="opacity: .7;"></center>

<div id="scenetext">
<p>
15 year old Ada, like most other teen girls, does what she wants. Self-portraits, admiration for boys, technology. 
Though most of her time is spent studying and babysitting, she keeps her face &mdash; what seems to be her greatest
asset &mdash; acne and blemish free. <br> <br>

Juggling her time between academics and babysitting, Ada grew unaware of her health. This has resulted to extreme 
migraines and illusions. Assuming this is part of adolescence and the norm, she did not worry about it and has never 
consulted a doctor about her condition. <br> <br>

She felt that her headaches became more and more dreadful. Her state has led her to horrible acts and delusions, 
making her experience her worst nightmare that got her into a horrendous situation. In addition, her obsessions, 
as well, became a factor for committing such abominable act.

</p>

	
</div>

<center><img src="images/line divider.png" width=800 style="opacity: .7; margin: 0 0 20px 0;"></center>

<div align="center" style="padding-bottom: 30px;">
<a href="tableofcontent.jsp" title="Back to Table of Contents"><button id="button">BACK</button></a>
<a href="cover.jsp" title="Back to Table of Contents"><button id="button2">BACK TO COVER</button></a>
<a href="Chapter1.jsp" title="Proceed to Chapter 1"><button id="button">Next</button></a>
</div>

</div>


</body>
</html>

